<template>
  <div class="card">
    <div class="user-profile">
      <div class="user-avatar" @click="showAvatarDialog">
        <i class="el-icon-user-solid"></i>
      </div>
      <h3 class="user-name">{{ user.name }}</h3>
      <div class="status-selector">
        <span class="status-badge" :class="getStatusClass(user.status)">{{ user.status }}</span>
        <i class="el-icon-arrow-down"></i>
        <select v-model="user.status" @change="updateStatus">
          <option value="空闲">空闲</option>
          <option value="工作">工作</option>
          <option value="上课">上课</option>
          <option value="开会">开会</option>
        </select>
      </div>
      <div class="user-actions">
        <el-link type="primary" :underline="false">个人信息</el-link>
        <span class="divider">|</span>
        <el-link type="primary" :underline="false">密码修改</el-link>
        <span class="divider">|</span>
        <el-link type="primary" :underline="false" @click="logout">退出登录</el-link>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useTokenStore } from '@/stores/token'

const userStore = useTokenStore()
const router = useRouter()

const user = ref({
  name: '刘星铄',
  status: '空闲'
})

const getStatusClass = (status) => {
  const statusMap = {
    '空闲': 'green',
    '工作': 'blue',
    '上课': 'orange',
    '开会': 'red'
  }
  return statusMap[status] || 'gray'
}

const updateStatus = () => {
  console.log('状态更新为:', user.value.status);
}
const logout = () => {
    userStore.logout()
    window.location.href = '/login.html'
}

const emit = defineEmits(['show-avatar-dialog'])
const showAvatarDialog = () => {
  emit('show-avatar-dialog');
}
</script>

<style scoped>
.card {
  background: #fff;
  border: 1px solid #e0e0e0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.user-profile {
  padding: 20px;
  text-align: center;
}

.user-avatar {
  width: 72px;
  height: 72px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: #666;
  cursor: pointer;
  transition: all 0.3s;
  border: 1px solid #e0e0e0;
}

.user-avatar:hover {
  background-color: #e0e0e0;
}

.user-name {
  margin: 0 0 8px 0;
  font-size: 16px;
  color: #333;
}

.status-selector {
  position: relative;
  display: inline-block;
  margin-bottom: 12px;
}

.status-selector select {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 2px;
  font-size: 12px;
  margin-right: 5px;
}

.status-badge.green {
  background-color: #e8f5e9;
  color: #4caf50;
}

.status-badge.blue {
  background-color: #e3f2fd;
  color: #2196f3;
}

.status-badge.orange {
  background-color: #fff3e0;
  color: #ff9800;
}

.status-badge.red {
  background-color: #ffebee;
  color: #f44336;
}

.status-badge.gray {
  background-color: #f5f5f5;
  color: #9e9e9e;
}

.user-actions {
  margin-top: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.divider {
  margin: 0 8px;
  color: #ddd;
}
</style>